<script lang="ts">
    import {bem} from "@/common/util";
    import mixin from "@/uni_modules/u-tools/mixin/mixin";
    import mpMixin from "@/uni_modules/u-tools/mixin/mpMixin";
    import props from "./props";
    import UIcon from "@/uni_modules/u-icon/components/u-icon/u-icon.vue";
    import UText from "@/uni_modules/u-text/components/u-text/u-text.vue";

    export default {
        name: "u-checkbox",
        // 组件
        components: {UIcon, UText},
        // 混合
        mixins: [props, mixin, mpMixin],
        // 事件
        emits: ["change", "update:change", "onload"],
        // 数据
        data()
        {
            return {
                // 选中状态
                status: false
            };
        },
        // 监听器
        watch: {
            // 监听复选框的选中状态
            checked(value: boolean): void
            {
                this.status = value;
            }
        },
        // 页面挂载
        mounted()
        {
            // 组件挂载完成
            this.$nextTick(() =>
            {
                // 获取当前复选框的值
                this.status = this.checked;

                // 判断是否触发change事件
                if (this.trigger)
                {
                    // 触发自定义change事件
                    this.$emit("change", this.status);
                }

                // 触发onload事件
                this.$emit("onload", this.status);
            });
        },
        // 计算函数
        computed: {
            // 生成bem风格的类名
            bemClass(): string
            {
                return bem("checkbox", [
                    this.reverse ? "reverse" : "",
                    this.shape
                ]);
            },
            // 获取图标的颜色
            getIconColor(): string
            {
                // 当前颜色值
                let color: string = this.iconColor;

                // 未选中颜色
                if (!this.status)
                {
                    color = "transparent";
                }
                // 选中颜色
                else
                {
                    // 未禁用
                    if (!this.disabled)
                    {
                        color = color || "#fff";
                    }
                    // 禁用
                    else
                    {
                        color = "#c8c9cc";
                    }
                }

                return color;
            }
        },
        // 方法
        methods: {
            // 改变事件
            changeHandler(event: Record<string, any>): void
            {
                // 禁用默认行为事件
                this.stopPropagation(event);

                // 禁用
                if (this.disabled)
                {
                    return;
                }

                // 执行状态改变
                this.checkboxStatusChange(event);
            },
            // 提示文本点击事件
            labelHandler(event: Record<string, any>): void
            {
                // 禁用默认行为事件
                this.stopPropagation(event);

                if (!this.labelDisabled && !this.disabled)
                {
                    this.checkboxStatusChange(event);
                }
            },
            // 复选框状态改变
            checkboxStatusChange(event: Record<string, any>): void
            {
                // 改变选中状态
                this.status = !this.status;

                this.$emit("update:change", this.status);

                // 触发change事件
                this.$emit("change", this.status);

                // 阻止事件冒泡
                this.stop && this.stopPropagation(event);
            }
        }
    };
</script>

<template>
    <!-- 复选框组件 -->
    <view
        :class="[
            bemClass,
            customClass
        ]"
        :style="[customStyle]"
        :name="name"
        @tap.stop="changeHandler"
    >
        <!-- 复选框 -->
        <view
            :class="[
                {'u-checkbox-disabled': disabled},
                {'u-checkbox-checked': status},
                {'u-checkbox-disabled-checked': status && disabled}
            ]"
            :style="[
                {'--custom-checkbox-active-background-color': activeColor},
                {'--custom-checkbox-inactive-background-color': inactiveColor}
            ]"
            class="u-checkbox-wrapper"
        >
            <slot name="icon">
                <u-icon
                    :color="getIconColor"
                    :size="12"
                    icon="checkbox-mark"
                />
            </slot>
        </view>
        <!-- //复选框 -->

        <!-- 文本 -->
        <view
            class="u-checkbox-label"
            @tap.stop="labelHandler"
        >
            <u-text
                :color="disabled ? '#c8c9cc' : labelColor"
                :font-size="labelSize"
                :limit="true"
                :text="label"
            />
        </view>
        <!-- //文本 -->
    </view>
    <!-- //复选框组件 -->
</template>

<style lang="scss" scoped>
    $u-checkbox-icon-wrapper-width: 18px !default;
    $u-checkbox-icon-wrapper-height: 18px !default;
    $u-checkbox-icon-wrapper-border-color: #c8c9cc !default;
    $u-checkbox-icon-wrapper-border-radius: 3px !default;
    $u-checkbox-icon-wrapper-transition-duration: .3s !default;
    $u-checkbox-icon-wrapper-checked-background-color: $theme-primary !default;
    $u-checkbox-icon-wrapper-checked-disabled-background-color: #ebedf0 !default;
    $u-checkbox-icon-wrapper-un-checked-background-color: #fff !default;
    $u-checkbox-label-margin-left: 5px !default;

    .u-checkbox
    {
        display: flex;
        overflow: hidden;
        align-items: center;
        flex-direction: row;

        // 复选框
        &-wrapper
        {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            justify-content: center;
            box-sizing: border-box;
            width: $u-checkbox-icon-wrapper-width;
            height: $u-checkbox-icon-wrapper-height;
            transition-duration: $u-checkbox-icon-wrapper-transition-duration;
            transition-property: border-color, background-color, color;
            color: transparent;
            border: 1px solid $u-checkbox-icon-wrapper-border-color;
            border-radius: $u-checkbox-icon-wrapper-border-radius;
            background-color: var(--custom-checkbox-inactive-background-color, $u-checkbox-icon-wrapper-un-checked-background-color);
        }

        // 选中
        &-checked
        {
            border-color: var(--custom-checkbox-active-background-color, $u-checkbox-icon-wrapper-checked-background-color);
            background-color: var(--custom-checkbox-active-background-color, $u-checkbox-icon-wrapper-checked-background-color);
        }

        // 禁用
        &-disabled
        {
            background-color: $u-checkbox-icon-wrapper-checked-disabled-background-color;
        }

        // 选中禁用
        &-disabled-checked
        {
            border-color: $u-checkbox-icon-wrapper-border-color;
        }

        // 反向
        &-reverse
        {
            flex-direction: row-reverse;
            justify-content: space-between;

            .u-checkbox-label
            {
                margin: 0 $u-checkbox-label-margin-left 0 0;
            }
        }

        // 圆形
        &-circle
        {
            // 复选框
            .u-checkbox-wrapper
            {
                border-radius: 50%;
            }
        }

        // 文本提示
        &-label
        {
            margin-left: $u-checkbox-label-margin-left;
        }
    }
</style>